<template>
  <div :style="styleName">
    <span v-if="config.title"> {{ config.title }}：</span> {{ label }}
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    label() {
      if (this.config.table !== "learun_type_text") {
        return this.config._content || this.config.table;
      }
      return this.config.content;
    },
    styleName() {
      return {
        width: `${this.config.width}pt`,
        height: `${this.config.height}pt`,
        overflow: "hidden",

        fontFamily: this.config.fontFamily,
        fontSize: this.config.fontSize + "pt",
        writingMode: this.config.writingMode,
        fontWeight: this.config.fontWeight,
        fontStyle: this.config.fontStyle,
        textDecoration: this.config.textDecoration,
        textAlign: this.config.textAlign,

        letterSpacing: this.config.letterSpacing + "pt",
        lineHeight:
          this.config.lineHeight > this.config.height
            ? this.config.height + "pt"
            : this.config.lineHeight + "pt",
        paddingBottom: this.config.paragraphSpacing + "pt",

        opacity: this.config.opacity / 100,
        color: this.config.isTextColor == "1" ? this.config.textColor : "#000",

        backgroundColor:
          this.config.isBackgroundColor == "1" && this.config.backgroundColor
            ? this.config.backgroundColor
            : "rgba(0,0,0,0)",

        "-webkit-text-stroke":
          this.config.isTextShadow == "1" && this.config.textShadowColor
            ? `2pt ${this.config.textShadowColor}`
            : "",
      };
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>
